import React from 'react'
import { Table, Modal, Switch, Image, InputNumber,message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import axios from '../../utils/http'
import { QUERYADVERT, UPDATEADVERT,DELETEADVERTBYADVERTID } from '../../utils/api'


class AdvertisingListTabel extends React.Component {
  constructor() {
    super()
    this.state = {
      //   表格的头部
      columns: [
        {
          title: '广告名称',
          key: 'aadvertId',
          dataIndex: 'advertName',
        },
        {
          title: '广告图片',
          key: 'advertId',
          // dataIndex: 'advertUrl',
          render: (advertUrl) =>
          <Image
               width={200,70}
            // src={`http://172.16.10.31:8768/api${advertUrl}`}
              src={`http://172.16.10.31:8768/${advertUrl.advertUrl}`}
           
          />,
         
          
        },
        {
          title: '广告位置',
          key: 'advertId',
          dataIndex: 'advertAdd',
        },
        {
          title: '开始日期',
          key: 'advertId',
          dataIndex: 'advertStart',
        },
        {
          title: '结束日期',
          key: 'advertId',
          dataIndex: 'advertLast',
        },
        {
          title: '排序',
          key: 'advertId',
          dataIndex: 'advertSort',
          render: (x,y,z) => <InputNumber min={0} max={500} style={{ backgroundColor: '#373758', color: 'white', border: 'none' }} defaultValue={parseInt(x)} onChange={(value)=>this.onChangeNum(x,y,z,value)} />,
        },
        {
          title: '启用',
          key: 'advertId',
          // dataIndex: 'advertStatu',
          render: (x,y,z) => <Switch defaultChecked={y.advertStatu} onChange={(state)=>this.onChange(x,y,z,state)} />,
        },
        {
          title: '操作',
          key: 'advertId',
          fixed: 'right',
          width: 100,
          render: (x,y,z) => <div style={{ color: '#4E6EF2' }}><span onClick={this.modification.bind(this,y)}>修改</span> <span onClick={this.confirm.bind(this,y)}>删除</span></div>,
        },
      ],

      //  表格数据
      data: [],
      //  修改表格的数据
      // Xgdata:{
      //     // 广告的位置 
      //     advertAdd:'',
      //     //广告的ID
      //     advertId:'',
      //     // 结束时间
      //     advertLast:'',
      //     // 开始时间
      //     advertStart:'',
      //     // 广告名称
      //     advertName:'',
      //     // 排序
      //     advertSort:'',
      //     // 开启状态
      //     advertStatu:'',
      //     // 广告连接
      //     link:'',
      //     // 广告图片
      //     url:''
      // }
      pagination:{
        pageSize: 4,
      }
    }
  }

  // 生命周期
  componentWillMount() {
    //  查询所有广告
     axios({
      method: 'get',
      url: QUERYADVERT
    }).then((data) => {
      console.log(data.data.data);
      this.setState({
        data: [...data.data.data]
      })
    })
    // console.log(this.state.data);
  }

  // switch开关
  onChange = async(x,y,z,checked) => {
    console.log(x);
    let Obj={...y}
    checked?Obj.advertStatu=1:Obj.advertStatu=0
    console.log(Obj);
     await axios({
      url: UPDATEADVERT,
      method: 'post',
      data:Obj 
    }).then(data=>{
      // console.log(data);
      if(data.data.code===200){
  
      }
    })

    await  axios({
      method: 'get',
      url: QUERYADVERT
    }).then((data) => {
      console.log(data.data.data);
      for (let i = 0; i < data.data.data.length; i++) {
        data.data.data[i].key=i
      }
      this.setState({
        data: [...data.data.data]
      })
    })


  }
  // inputnum排序方式
  onChangeNum = (x,y,z,value) => {
    // console.log(value);
    let Obj={...y}
    Obj.advertSort=value
    axios({
      url: UPDATEADVERT,
      method: 'post',
      data:Obj 
    }).then(data=>{
      console.log(data);
    })

  }



  // 删除弹框
  confirm = (y) => {
    // console.log(y);
    Modal.confirm({
      title: '是否删除',
      icon: <ExclamationCircleOutlined />,
      content:y.advertName,
      okText: '确认',
      cancelText: '取消',
      onOk:this.delSure.bind(this,y)
    });
  }

  // 确定按钮
  delSure=async(y)=>{
    await axios({
      method:'get',
      url:DELETEADVERTBYADVERTID,
      params:{advertId:y.advertId}
    }).then(data=>{
      // console.log(data);
      if(data.data.code===200){
        message.success('删除成功', 3);
      }else{
        message.error('删除失败',3);
      }
    })
       
     //  查询所有广告
     await axios({
      method: 'get',
      url: QUERYADVERT
    }).then((data) => {
      console.log(data.data.data);
      this.setState({
        data: [...data.data.data]
      })
    })


  }

  // 修改
  modification = (y) => {
    this.props.history.push({pathname:"/Home/wangZhan/AdvertisingList/ModifyAD",query: { name : y }});
  }


  render() {
    return (
      <Table pagination={this.state.pagination}  columns={this.state.columns} dataSource={this.state.data} />
    )
  }

}

export default AdvertisingListTabel